<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 在子组件标签上自定义一个事件 监听该事件的触发 -->
        <child @send-data="getData"></child>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            components: {
                child: {
                    template: `
                        <div>
                            这是个子组件
                            <button @click="sendData">按钮</button>
                        </div>
                    `,
                    data() {
                        return {
                            childMsg: 'hello world'
                        }
                    },


                    methods: {
                        sendData() {
                            //触发子组件上面的监听事件 第一个参数时事件名 第二个参数时要传递的数据
                            this.$emit('send-data', this.childMsg)
                        }
                    }
                }
            },
            data: {
                msg: ''
            },

            beforeCreate() {
                
                // this.$on('send-data', () => {
                //     console.log(1)
                // })
            },

            mounted() {
                // 通过$children也可以获取子组件的数据 但是不建议使用
                // console.log(this.$children[0].childMsg)
            },
            methods: {
                getData(data) {
                    console.log(data)
                }
            }
        })
    </script>
</body>
</html>